 $( function () {
     //验证用户名
     $( '.username' ).on( 'blur', () => {  
        let val = $( '.username' ).val(); 
         let reg = /^([\u4e00-\u9fa5]+(\.[\u4e00-\u9fa5]+)?){2}$/;
         let res = reg.test( val );
         if ( !res ) { 
             $( '.uname-err' ).show();
             return false;
         }
         $( '.uname-err' ).hide();
     } )
     let hobbies;
     $( ".btn" ).on( 'click', () => {
         let hobbies_array = [];
         $( '.hobbies:checked' ).each( ( index, item ) => {
             hobbies_array.push( $( item ).prop( 'name' ) );
             hobbies = hobbies_array.join('&nbsp');
             console.log( $( item ).prop( 'name' ) );
             console.log( hobbies_array );
         } )
         
         $.ajax( {
             type: 'post',
             dataType: 'jsonp',
             url: '/admin/add',
             headers: {
                 "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1Mzc1NTQzMDksImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjoxNywibG9naW5fdGltZSI6MTUzNzU1NDMwOX0sImV4cCI6MTUzODE1NDMwOX0.32Lys4hjjY2XRpM2r9YSmpYA798u821m_M5Tzb6wxIU",
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             data: {
                 "name": $( '.username' ).val(),
                 "age": $( '.age' ).val(),
                 "sex": $( '.sex:checked' ).prop('name'),
                 "phone": $( '.phone' ).val(),
                 "email": $( '.email' ).val(),
                 "date":$('.date-s').val(),
                 "hobbies":hobbies 
             },
             async: true,
         } )

         $.ajax( {
             type: 'get',
             dataType: 'json',
             url: '/db/get',
             headers: {
                 "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1Mzc1NTQzMDksImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjoxNywibG9naW5fdGltZSI6MTUzNzU1NDMwOX0sImV4cCI6MTUzODE1NDMwOX0.32Lys4hjjY2XRpM2r9YSmpYA798u821m_M5Tzb6wxIU",
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             success: res => {
                 var html = res.map( item => {
                     return `
                            <tr>
                                <td><input type='checkbox' class='ren_checkbox'></td>
                                <td class='render_name'>${item.name}</td>
                                <td class='render_age'>${item.age}</td>
                                <td class='render_sex'>${item.sex}</td>
                                <td class='render_phone'>${item.phone}</td>
                                <td class='render_email'>${item.email}</td>
                                <td class='render_date'>${item.date}</td>
                                <td class='render_hobbies'>${item.hobbies}</td>
                                <td><a href='javascript:;' class='update-btn' data-id='${item._id}'>修改</a></td>
                                <td><a href='javascript:;' data-id='${item._id}' class='del-btn'>删除</a></td>
                            </tr> `
                 } )
                 $( '.list_render' ).html( html );
                 $( '.admin' ).val( '' );
                 $('.hobbies').prop('checked',false)
             }
         } )
     } )
      
     $( '.list_render' ).on( 'click', '.del-btn', ( evt ) => { 
         $( evt.target).parents('tr').remove();
         $.ajax( {
             type:'delete',
             url: '/db/del',
             data: {'id':$( evt.target ).attr( 'data-id' )},
             dataType:'json',
             headers: {
                 "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1Mzc1NTQzMDksImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjoxNywibG9naW5fdGltZSI6MTUzNzU1NDMwOX0sImV4cCI6MTUzODE1NDMwOX0.32Lys4hjjY2XRpM2r9YSmpYA798u821m_M5Tzb6wxIU",
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             success: res => { 
             }
         })
     } )
     

     $( '.list_render' ).on( 'click', '.update-btn', (evt) => { 
        //  console.log($(this));
         $( '.mask' ).show();
         $( '.update-box' ).show();
         $( '.close-btn' ).on( 'click', () => {
             $( '.mask' ).hide();
             $( '.update-box' ).hide();
         } )
         let obj = $( evt.target ).parents( 'td' );
         console.log( obj.siblings( '.render_date' ).html() );
         $( '.u_name' ).val( obj.siblings( '.render_name' ).html() );
         $( '.u_age' ).val( obj.siblings( '.render_age' ).html() );
         $( '.u_phone' ).val( obj.siblings( '.render_phone' ).html() );
         $( '.u_email' ).val( obj.siblings( '.render_email' ).html() );
         $( '.date-u' ).val( obj.siblings( '.render_date' ).html() );

         let sex = $( '.u_sex' ).val( obj.siblings( '.render_sex' ).html() );
         if ( sex == '男' ) {
             $( '.u_sex_man' ).prop( 'checked', true );
         } else { 
             $( '.u_sex_women' ).prop( 'checked', true );
         }

         var mmm = $( evt.target ).attr( 'data-id' );
         $( '.submit-btn' ).on( 'click', () => { 
             $.ajax( {
                 type: 'put',
                 url: '/db/put',
                 data: {
                     'id': mmm,
                     'u_name': $( '.u_name' ).val(),
                     'u_age': $( '.u_age' ).val(),
                     'u_sex': $( '.u_sex:checked' ).prop('name'),
                     'u_phone': $( '.u_phone' ).val(),
                     'u_email': $( '.u_email' ).val(),
                     'u_date':$('.u_date').val()
                 }
             } )
             $.ajax( {
                 type: 'get',
                 url: '/db/get',
                 success: res => { 
                      var html = res.map( item => {
                          return `
                            <tr>
                                <td><input type='checkbox' class='ren_checkbox'></td>
                                <td class='render_name'>${item.name}</td>
                                <td class='render_age'>${item.age}</td>
                                <td class='render_sex'>${item.sex}</td>
                                <td class='render_phone'>${item.phone}</td>
                                <td class='render_email'>${item.email}</td>
                                <td class='render_date'>${item.date}</td>
                                <td class='render_hobbies'>${item.hobbies}</td>
                                <td><a href='javascript:;' class='update-btn' data-id='${item._id}'>修改</a></td>
                                <td><a href='javascript:;' data-id='${item._id}' class='del-btn'>删除</a></td>
                            </tr> `
                      } )
                      $( '.list_render' ).html( html );
                 }
             })
             $( '.mask' ).hide();
             $( '.update-box' ).hide();
         } )
     } )
     
     $( '.search-input' ).on( 'blur', () => { 
         $.ajax( {
             type:'post',
             url: '/db/search',
             data: {'name':$( '.search-input' ).val()},
             success: res => { 
                 console.log(res);
                 let html = res.map( item => {
                     return `
                            <tr>
                                <td><input type='checkbox' class='ren_checkbox'></td>
                                <td class='render_name'>${item.name}</td>
                                <td class='render_age'>${item.age}</td>
                                <td class='render_sex'>${item.sex}</td>
                                <td class='render_phone'>${item.phone}</td>
                                <td class='render_email'>${item.email}</td>
                                <td classs='render_date'>${item.date}</td>
                                <td class='render_hobbies'>${item.hobbies}</td>
                                <td><a href='javascript:;' class='update-btn' data-id='${item._id}'>修改</a></td>
                                <td><a href='javascript:;' data-id='${item._id}' class='del-btn'>删除</a></td>
                            </tr> `
                 } )
                 $( '.list_render' ).append( html );
             }
         })
     } )
     $( '.f_btn' ).on( 'click', () => {
         $.ajax( {
             type: 'post',
             url: '/db/find',
             data: { "startTime": $( '.date-l' ).val(), "endTime": $( '.date-r' ).val() },
             success: res => {
                 console.log( res );
                 var html = res.map( item => {
                     return `
                            <tr>
                                <td><input type='checkbox' class='ren_checkbox'></td>
                                <td class='render_name'>${ item.name }</td>
                                <td class='render_age'>${ item.age }</td>
                                <td class='render_sex'>${ item.sex }</td>
                                <td class='render_phone'>${ item.phone }</td>
                                <td class='render_email'>${ item.email }</td>
                                <td classs='render_date'>${ item.date }</td>
                                <td class='render_hobbies'>${ item.hobbies }</td>
                                <td><a href='javascript:;' class='update-btn' data-id='${ item._id }'>修改</a></td>
                                <td><a href='javascript:;' data-id='${ item._id }' class='del-btn'>删除</a></td>
                            </tr> `;
                 } );
                 $( '.list_render' ).append( html );  
             }
         } );
     } );
    //  $( '.list_render' ).on( 'change', '.all_checkbox', ( evt ) => { 
    //      $( '.ren_checkbox' ).prop( 'checked', evt.target.prop( 'checked' ) );
    //  })
    //  $( '.all_checkbox' ).change( () => { 
    //      $( ".list_render input" ).prop( 'checked', $( this ).prop( 'checked' ) );
    //  })
  
 } )